<template>
  <div class="container" @click.stop="showLanguage = false">
    <div class="page_content container-tt">
      <header class="flex_between">
        <div class="headLogo">
          <nuxt-link to="/ar">
            <div class="flex_">
              <img
                src="/static/logo.svg"
                class="img"
                alt="logo"
                width="34"
                height="34"
              />
              <span class="projectName">SavingTik</span>
            </div>
          </nuxt-link>
        </div>
        <div class="headTabs flex_">
          <!-- <div class="tItem">
            <nuxt-link to="/ar">
              <div @click="goToTop('video')">تنزيل تيك توك</div>
            </nuxt-link>
          </div> -->
          <div class="tItem">
            <nuxt-link to="/ar/download-tiktok-mp3">
              <div @click="goToTop('mp3')">تحميل تيك توك MP3</div>
            </nuxt-link>
          </div>
          <div class="tItem tItemBlod bor">
            <nuxt-link to="/ar/download-tiktok-story">
              <div @click="goToTop('story')">تحميل قصة تيك توك</div>
            </nuxt-link>
          </div>
          <language ref="languageRef"></language>
        </div>
        <div class="drawer" @click="showAppRightHandel">
          <img src="/static/menu.png" class="img" alt="menu" />
        </div>
      </header>
      <div class="banner_box flex_center">
        <div class="banner flex_ccenter">
          <h1 class="h1">تنزيل قصة تيك توك</h1>
          <!-- <h2 class="h2">- Tiktok Downloader, Without Watermark. Fast. -</h2> -->
        </div>
      </div>
      <div class="downloadInput flex_center">
        <div class="inputBox flex_between">
          <input
            type="text"
            v-model="input"
            @keydown="sendDownload($event)"
            @input="handleInput"
            @paste="handleInput"
            class="ipt Reverse"
            placeholder="الصق رابط TikTok هنا"
            :disabled="isHttpLoading"
          />
          <div
            class="clearx flex_ccenter"
            v-if="input != ''"
            @click.stop="input = ''"
          >
            <img src="/static/clear.png" class="img" alt="" />
          </div>
          <div
            class="downBtn shou flex_ccenter"
            :class="isHttpLoading ? 'isHttpLoading' : ''"
            @click.stop="Download"
          >
            <div class="downImg">
              <img src="/static/download.webp" class="img" alt="download" />
            </div>
            <div class="iptbtn">تحميل</div>
          </div>
          <div class="posi shou" v-if="input != ''" @click.stop="input = ''">
            <img src="/static/clear.png" class="img" alt="" />
          </div>
        </div>
      </div>
      <div class="downStorySuccess" v-if="downStorySuccess">
        <div class="storyVideoInfo flex_between">
          <div class="downLeft flex_">
            <img :src="downData.avatar" class="img" alt="" />
            <div class="flex_column info Reverse">
              <div class="text1">
                {{ downData.title }}
              </div>
              <div class="text2">{{ downData.nickname }}</div>
            </div>
          </div>
          <div class="downBtn flex_ccenter shou" @click="allIn">تحميل الكل</div>
        </div>
        <div class="storyImageList flex_between">
          <div class="item" :key="k" v-for="(item, k) in downData.images">
            <client-only>
              <el-image
                style="width: 100%; height: 100%"
                fit="cover"
                :src="item"
                :preview-src-list="downData.images"
              >
              </el-image>
            </client-only>
            <div class="overlay">
              <div
                class="posi shou flex_center"
                @click="handleDownload(item, 'SavingTik-Image', 'image')"
              >
                <img
                  src="/static/download.webp"
                  class="xiazai"
                  alt="download"
                />
                <div>تحميل الصورة</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downSuccess flex_center" v-if="downSuccess">
        <div class="success_box">
          <div class="_video flex_between">
            <div class="bigImg flex_ccenter">
              <img :src="downData.cover" class="img" alt="" />
            </div>
            <div class="downInfo flex_column">
              <div class="info_1 flex_between">
                <div class="tit flex_">
                  <div class="timg">
                    <img
                      src="/static/blue.webp"
                      class="img"
                      alt="blue square"
                    />
                  </div>
                  <div>{{ downData.nickname }}</div>
                </div>
                <div class="times flex_">
                  <img src="/static/time.png" class="img" alt="" />
                  {{ duration }}
                </div>
              </div>
              <div class="info_2 Reverse">
                {{ downData.title }}
              </div>
              <div class="info_3">
                <div class="item flex_between">
                  <div class="downLeft flex_column">
                    <div class="text1">بدون علامة مائية</div>
                    <div class="text2">{{ WithoutVideoSize }}</div>
                  </div>
                  <div
                    class="downBtn flex_ccenter shou"
                    @click="
                      handleDownload(
                        downData.video_url,
                        'SavingTik-Without Watermark',
                        'video'
                      )
                    "
                  >
                    تحميل
                  </div>
                </div>
                <!-- <div class="item flex_between">
                  <div class="downLeft flex_column">
                    <div class="text1">Video Download</div>
                    <div class="text2">{{VideoSize }}</div>
                  </div>
                  <div class="downBtn flex_ccenter shou">Download</div>
                </div> -->
                <div class="item flex_between">
                  <div class="downLeft">
                    <div class="text1">تحميل MP3</div>
                  </div>
                  <div
                    class="downBtn flex_ccenter shou"
                    @click="
                      handleDownload(
                        downData.mp3_url,
                        'SavingTik-Download MP3',
                        'mp3'
                      )
                    "
                  >
                    تحميل
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downStorySuccess_app" v-if="downStorySuccess">
        <div class="storyVideoInfo flex_between">
          <div class="downLeft flex_">
            <img :src="downData.avatar" class="img" alt="" />
            <div class="flex_column info Reverse">
              <div class="text1">
                {{ downData.title }}
              </div>
              <div class="text2">{{ downData.nickname }}</div>
            </div>
          </div>
        </div>
        <div class="allDown flex_ccenter" @click="allIn">تحميل كل الصور</div>
        <div class="storyImageList flex_between">
          <div
            class="item"
            @click.stop="previewImage(item, k)"
            :key="k"
            v-for="(item, k) in downData.images"
          >
            <img :src="item" class="img" alt="" />
            <div class="overlay">
              <div
                class="posi shou flex_center"
                @click.stop="handleDownload(item, 'SavingTik-Image', 'image')"
              >
                <img src="/static/appxiazai.png" class="xiazai" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downSuccess_app flex_center" v-if="downSuccess">
        <div class="success_box">
          <div class="_video flex_between">
            <div class="bigImg flex_ccenter">
              <img :src="downData.cover" class="img" alt="" />
            </div>
            <div class="downInfo flex_column">
              <div class="info_1">
                <div class="tit flex_">
                  <div class="timg">
                    <img src="/static/point.png" class="img" alt="" />
                  </div>
                  <div class="uname">{{ downData.title }}</div>
                </div>
              </div>
              <div class="info_2 Reverse">{{ downData.nickname }}</div>
              <div class="times flex_between">
                <div></div>
                <div>الوقت — — {{ duration }}</div>
              </div>
            </div>
          </div>
          <div class="info_3">
            <div class="item flex_between">
              <div class="downLeft flex_column">
                <div class="text1">بدون علامة مائية</div>
                <div class="text2">{{ WithoutVideoSize }}</div>
              </div>
              <div
                class="downBtn flex_ccenter shou"
                @click="
                  handleDownload(
                    downData.video_url,
                    'SavingTik-Without Watermark',
                    'video'
                  )
                "
              >
                تحميل
              </div>
            </div>

            <div class="item flex_between">
              <div class="downLeft">
                <div class="text1">تحميل MP3</div>
              </div>
              <div
                class="downBtn flex_ccenter shou"
                @click="
                  handleDownload(
                    downData.mp3_url,
                    'SavingTik-Download MP3',
                    'mp3'
                  )
                "
              >
                تحميل
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="loading" v-if="isHttpLoading">
        <div class="loading-dots flex_center">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="tips flex_center">
          <div class="tip">
            <img src="/static/tip.png" class="img" alt="prompt" />
          </div>
          <div>جارٍ استرداد البيانات، يرجى الانتظار بضع ثوانٍ!</div>
        </div>
      </div>
      <div class="error flex_ccenter" v-if="httpError">
        <div class="hono flex_">
          <img src="/static/tishi.png" class="img" alt="prompt" />
          <div>أوه لا ~</div>
        </div>
        <div class="errMsg">الرابط الحالي خاطئ. يرجى نسخ الرابط الصحيح.</div>
      </div>
      <div class="declare Reverse">
        <div class="text_content font18" style="color: #fff">
          لحفظ محتوى TikTok على جهازك، بما في ذلك قصص TikTok ومقاطع فيديو
          TikTok، يقدم SavingTik حلاً شاملاً. يمكنك تنزيل قصص TikTok المفضلة
          لديك مجانًا بدون علامة مائية باستخدام تطبيقنا المتوافق مع أنظمة iOS
          وAndroid وأجهزة الكمبيوتر الشخصية.
        </div>
      </div>
      <div class="next_content flex_ccenter Reverse">
        <div class="timeline_title flex_">
          <div class="timg">
            <img src="/static/blue.webp" class="img" alt="blue square" />
          </div>
          <h3 class="h3">كيف يمكنني استخدام Savingtik لتنزيل قصص TikTok؟</h3>
        </div>
        <div class="timeline_content">
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="current">1</div>
              </div>
              <div class="section-right">
                حدد موقع رابط فيديو TikTok، ثم انسخه.
              </div>
            </div>
            <div class="section-lower flex_">
              <div class="Group flex_center">
                <div class="section-left"></div>
              </div>
              <div class="section-right">
                أولاً، ابحث عن فيديو القصة الذي تريد تنزيله على TikTok. يوجد
                خيار "مشاركة" في كل فيديو. إنه الخيار السفلي الأيمن. حدد "نسخ
                الرابط" لتخزين عنوان URL لفيديو TikTok. يمكن أيضًا نسخ عنوان URL
                ولصقه في متصفح الويب الخاص بك.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/copy-the-tiktok-video-url.webp"
              class="sectionImg"
              alt="copy the TikTok video URL"
            />
          </div>
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="current">2</div>
              </div>
              <div class="section-right">
                استخدم أداة تنزيل قصة TikTok على Savingtik.
              </div>
            </div>
            <div class="section-lower flex_">
              <div class="Group flex_center">
                <div class="section-left"></div>
              </div>
              <div class="section-right">
                يمكنك النقر على هذه الصفحة أو زيارة SavinTik.com. الصق عنوان URL
                المنسوخ في رأس الصفحة. للصق الرابط، استخدم اختصار لوحة المفاتيح
                Ctrl+V أو زر "Pastel" على الأجهزة المحمولة.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/paste-tiktok-video-url.webp"
              class="sectionImg"
              alt="paste TikTok video URL"
            />
          </div>
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="current">3</div>
              </div>
              <div class="section-right">انقر فوق "تنزيل".</div>
            </div>
            <div class="section-lower flex_">
              <div class="Group flex_center">
                <div class="section-left"></div>
              </div>
              <div class="section-right">
                الصق الرابط في متصفحك وانقر على "تنزيل" لتنزيل قصة TikTok
                بجودتها الأصلية الخالية من العلامات المائية.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/download-tiktok-story.webp"
              class="sectionImg"
              alt="download Tiktok story"
            />
          </div>
        </div>
        <div class="timeline_content_app">
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="red-dot"></div>
              </div>
              <div class="section-right">
                1. حدد موقع رابط فيديو TikTok، ثم انسخه.
              </div>
            </div>
            <div class="section-lower flex_">
              <div class="section-right">
                أولاً، ابحث عن فيديو القصة الذي تريد تنزيله على TikTok. يوجد
                خيار "مشاركة" في كل فيديو. إنه الخيار السفلي الأيمن. حدد "نسخ
                الرابط" لتخزين عنوان URL لفيديو TikTok. يمكن أيضًا نسخ عنوان URL
                ولصقه في متصفح الويب الخاص بك.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/copy-the-tiktok-video-url.webp"
              class="sectionImg"
              alt="copy the TikTok video URL"
            />
          </div>
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="red-dot"></div>
              </div>
              <div class="section-right">
                2. استخدم أداة تنزيل قصة TikTok على Savingtik.
              </div>
            </div>
            <div class="section-lower flex_">
              <div class="section-right">
                You can click on this page or visit SavinTik.com. Paste the
                copied URL into the page's header. To paste the link, use the
                keyboard shortcut Ctrl+V or the "Pastel" button on mobile
                devices.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/paste-tiktok-video-url.webp"
              class="sectionImg"
              alt="paste TikTok video URL"
            />
          </div>
          <div class="section">
            <div class="section-upper flex_">
              <div class="section-left">
                <div class="red-dot"></div>
              </div>
              <div class="section-right">3. انقر فوق "تنزيل".</div>
            </div>
            <div class="section-lower flex_">
              <div class="section-right">
                الصق الرابط في متصفحك وانقر على "تنزيل" لتنزيل قصة TikTok
                بجودتها الأصلية الخالية من العلامات المائية.
              </div>
            </div>
          </div>
          <div class="flex_ccenter">
            <img
              src="/static/download-tiktok-story.webp"
              class="sectionImg"
              alt="download Tiktok story"
            />
          </div>
        </div>
      </div>
      <div
        class="declare declareapp flex_ccenter Reverse"
        style="padding: 20px"
      >
        <div class="text_content" style="color: #f9224c">
          ملحوظة: يمكنك استخدام جميع الميزات دون تسجيل الدخول إلى TikTok.
        </div>
      </div>
      <div class="table Reverse">
        <div class="table-title flex_ccenter">قصة تيك توك إنقاذ تيك</div>
        <div class="table-content flex_between">
          <div class="table-left">
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>التنسيق:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>الجودة:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>سرعة التحميل:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>حصة التنزيل:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>يكلف:</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>الخدمات:</div>
            </div>
          </div>
          <div class="table-right">
            <div class="item flex_center">
              <div>إم بي 4</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>أصلية، غير مضغوطة</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>سريعة</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>غير محدودة</div>
            </div>
            <div class="item flex_center">
              <div>مجانا</div>
            </div>
            <div class="item flex_center">
              <div class="bgImg"></div>
              <div>الحالة والقصة والقصيرة</div>
            </div>
          </div>
        </div>
      </div>
      <div class="benefits Reverse">
        <div class="beneTit flex_">
          <img src="/static/ub.webp" class="img" alt="advantages" />
          <div>مزايا حفظ القصة على TikTok عبر الإنترنت</div>
        </div>
        <div class="beneContent">
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">
              عند تنزيل القصص من TikTok، قم بإزالة العلامة المائية تلقائيًا.
            </div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">
              يعمل مع أجهزة الكمبيوتر الشخصية والأجهزة اللوحية والأجهزة
              المحمولة. يتوافق برنامج تنزيل قصة Savingtik TikTok مع معظم متصفحات
              الويب الشائعة، بما في ذلك Chrome وFirefox وSafari وEdge.
            </div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">
              احتفظ بـ TT Tales، وهو تنسيق أفلام MP4 المشهور؛
            </div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">حفظ قصص TT، وهو تنسيق فيديو MP4 شائع؛</div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">سرعات تنزيل سريعة؛</div>
          </div>
          <div class="col1 flex_">
            <div class="dian"></div>
            <div class="text">تنزيلات غير محدودة وخالية من التكلفة.</div>
          </div>
        </div>
        <div class="benePosi">
          <img src="@/static/ubmaks.png" class="img" alt="" />
        </div>
      </div>

      <div class="faqs">
        <div class="flex_center">
          <h3 class="faq_title">
            - الأسئلة الشائعة والنصائح الخاصة بـ SavingTik -
          </h3>
        </div>
        <div class="faq_content ">
          <div id="faq" itemscope="" itemtype="https://schema.org/FAQPage">
            <div
              itemprop="mainEntity"
              itemscope=""
              itemtype="https://schema.org/Question"
              class="faq_item shou"
              @click="changeFaqItemOpen(item, k)"
              :key="k"
              v-for="(item, k) in list"
            >
              <button style="width: 100%">
                <div class="itemTitle flex_between">
                  <h5 itemprop="name" class="tit">{{ item.title }}</h5>
                  <div class="imgs">
                    <div v-if="!item.isOpen" class="opentriangle"></div>
                    <div v-else class="closetriangle"></div>
                  </div>
                </div>
              </button>
              <div
                itemprop="acceptedAnswer"
                itemscope=""
                itemtype="https://schema.org/Answer"
              >
                <div
                  itemprop="text"
                  class="faq_text Reverse"
                  :class="item.isOpen ? '' : 'isBlock'"
                >
                  <template v-if="item.textContent">
                    {{ item.textContent }}
                  </template>
                  <ul v-else>
                    <li :key="i" v-for="(item1, i) in item.text">
                      {{ item1 }}
                    </li>
                  </ul>
                  <div v-if="item.b">
                    <b>{{ item.b.btit }}</b>
                    <div style="word-wrap: break-word">
                      {{ item.b.burl }}
                    </div>
                    <div>{{ item.b.btext }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <pc-footer></pc-footer>
      </div>
    </div>
    <div class="page_bottom flex_center">
      ©SavingTik.Com 2023 All Rights Reserved.
    </div>
    <article-content></article-content>
    <div class="app_page_bottom">
      <app-footer></app-footer>
    </div>
    <video src="" id="video" autoplay muted v-show="false"></video>
    <div class="dloading" v-if="dloading">
      <div class="loader"></div>
    </div>
    <van-popupapp ref="popupAppRef"></van-popupapp>
  </div>
</template>
    
    <script>
import dataList from "@/static/faqsStory.js";
import { handleClick } from "@/plugins/Firebase.js";
import CryptoJS from "crypto-js";
import { ImagePreview } from "vant";
import language from "@/components/language.vue";
import VanPopupapp from "@/components/vanPopupapp.vue";
import PcFooter from "@/components/pcFooter.vue";
import AppFooter from "@/components/appFooter.vue";
import ArticleContent from '~/components/articleContent.vue';

export default {
  components: { language, VanPopupapp, PcFooter, AppFooter, ArticleContent },
  head: {
    title: "TikTok Story Downloader - SavingTik",
    htmlAttrs: {
      lang: "ar",
    },
    bodyAttrs: {
      "data-lang": "ar",
    },
    meta: [
      { charset: "utf-8" },
      { property: "og:locale", content: "ar" },
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
      },
      { name: "robots", content: "index, follow" },
      { name: "revisit-after", content: "1 days" },
      {
        name: "description",
        content:
          "SavingTik - أداة تنزيل قصص TikTok لدينا مجانية الاستخدام، دون أي قيود أو حدود. قم بالتنزيل بسهولة واستمتع بقصص خالية من العلامات المائية وبدقة عالية.",
      },
      {
        itemprop: "name",
        content: "TikTok Story Downloader - SavingTik",
      },
      { name: "author", content: "SavingTik" },
      { name: "msvalidate.01", content: "" },

      { itemprop: "image", content: "/static/logo/savingtik-thumb.webp" },
      { name: "twitter:card", content: "summary" },
      { name: "twitter:title", content: "TikTok Story Downloader - SavingTik" },
      {
        name: "twitter:description",
        content:
          "SavingTik - أداة تنزيل قصص TikTok لدينا مجانية الاستخدام، دون أي قيود أو حدود. قم بالتنزيل بسهولة واستمتع بقصص خالية من العلامات المائية وبدقة عالية.",
      },
      {
        name: "twitter:image:src",
        content: "/static/logo/savingtik-thumb.webp",
      },
      { name: "twitter:site", content: "SavingTik" },
      { property: "og:title", content: "TikTok Story Downloader - SavingTik" },
      { property: "og:type", content: "article" },
      { property: "og:image", content: "/static/logo/savingtik-thumb.webp" },
      {
        property: "og:description",
        content:
          "SavingTik - أداة تنزيل قصص TikTok لدينا مجانية الاستخدام، دون أي قيود أو حدود. قم بالتنزيل بسهولة واستمتع بقصص خالية من العلامات المائية وبدقة عالية.",
      },
      { property: "og:site_name", content: "SavingTik" },
    ],
    link: [
      // Favicons
      {
        rel: "shortcut icon",
        href: "/static/logo/favicon.png",
        sizes: "512x512",
      },
      {
        rel: "apple-touch-icon",
        href: "/static/logo/favicon.png",
        sizes: "192x192",
      },
      //Apple Touch Icons

      //multilingual
      {
        rel: "alternate",
        hreflang: "x-default",
        href: "https://savingtik.com/ar/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "en",
        href: "https://savingtik.com/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "en-in",
        href: "https://savingtik.com/in/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "vi",
        href: "https://savingtik.com/vn/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "tr",
        href: "https://savingtik.com/tr/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "id",
        href: "https://savingtik.com/id/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "fr",
        href: "https://savingtik.com/fr/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "pt",
        href: "https://savingtik.com/pt/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ru",
        href: "https://savingtik.com/ru/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "es",
        href: "https://savingtik.com/es/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ms",
        href: "https://savingtik.com/ms/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ko",
        href: "https://savingtik.com/ko/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ja",
        href: "https://savingtik.com/ja/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "jv",
        href: "https://savingtik.com/jv/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "cs",
        href: "https://savingtik.com/cs/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "de",
        href: "https://savingtik.com/de/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "it",
        href: "https://savingtik.com/it/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "pl",
        href: "https://savingtik.com/pl/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "hu",
        href: "https://savingtik.com/hu/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "nl",
        href: "https://savingtik.com/nl/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "ro",
        href: "https://savingtik.com/ro/download-tiktok-story",
      },
      {
        rel: "alternate",
        hreflang: "el",
        href: "https://savingtik.com/el/download-tiktok-story",
      },
      {
        rel: "canonical",
        href: "https://savingtik.com/ar/download-tiktok-story",
      },
    ],
  },
  name: "download-Story",
  data() {
    return {
      list: dataList.listAr,
      input: "",
      dloading: false,
      showAppRight: false,
      showLanguage: false,
      Language: "en_GB",
      isHttpLoading: false,
      downSuccess: false,
      downStorySuccess: false,
      httpError: false,
      downData: {},
      WithoutVideoSize: "",
      duration: "",
      VideoSize: "",
    };
  },
  mounted() {
    this.debouncedDownInput = this.debounce(this.downInput, 1000);
  },
  methods: {
    showAppRightHandel() {
      this.$refs.popupAppRef.open();
    },
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
    goToTop(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "top",
      });
    },
    goToTools(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "tools",
      });
    },
    debounce(fn, delay) {
      let timer;
      return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(context, args);
        }, delay);
      };
    },
    downInput(e) {
      // 粘贴链接到输入框 action_tt_paste
      handleClick("action_tt_paste", {
        islink: e.target.value,
        from: "story",
      });
    },
    handleInput(e) {
      this.debouncedDownInput(e);
    },
    changeLanguage() {
      if (this.$i18n.locale == "en") {
        this.$i18n.setLocale("zh");
      } else {
        this.$i18n.setLocale("en");
      }
    },
    previewImage(item, k) {
      ImagePreview({
        images: this.downData.images,
        startPosition: k,
      });
    },
    sendDownload(event) {
      if (event.keyCode === 13 && !this.isHttpLoading) {
        this.Download();
        event.preventDefault();
        return false;
      }
    },
    async allIn() {
      // 设定 URL 数组
      //点击开始下载按钮 action_tt_download_start
      handleClick("action_tt_download_start", {
        site: "all",
        from: "story",
      });
      // 通过 map 返回一个 Promise 数组
      let promises = this.downData.images.map((url) =>
        this.handleDownloadImages(url)
      );

      // 等待所有 Promise 完成
      await Promise.all(promises);
      this.dloading = false;
    },
    async handleDownloadImages(src) {
      try {
        this.dloading = true;
        const response = await fetch(src);
        if (!response.ok) throw new Error("网络响应不好");
        const data = await response.blob();
        let url = window.URL.createObjectURL(data);
        let link = document.createElement("a");
        link.href = url;
        link.download = "SavingTik-" + new Date().getTime();
        document.body.appendChild(link);
        link.click();
        link.remove();
        // //开始下载 tt_download_start
        handleClick("tt_download_start", {
          site: "all",
          from: "story",
        });
      } catch (error) {
        this.dloading = false;
        console.error("捕获到错误: " + error);
      }
    },
    async handleDownload(src, fileName, type) {
      if (type == "image") {
        //点击开始下载 action_tt_download_start
        handleClick("action_tt_download_start", {
          site: "story",
          from: "story",
        });
      } else if (type == "video") {
        //点击开始下载 tt_download_start
        handleClick("action_tt_download_start", {
          site: "video",
          from: "story",
        });
      } else {
        //点击开始下载 tt_download_start
        handleClick("action_tt_download_start", {
          site: "mp3",
          from: "story",
        });
      }
      try {
        this.dloading = true;
        const response = await fetch(src);
        if (!response.ok) throw new Error("网络响应不好");
        const data = await response.blob();
        let url = window.URL.createObjectURL(data);
        let link = document.createElement("a");
        link.href = url;
        link.download = "SavingTik-" + new Date().getTime();
        document.body.appendChild(link);
        link.click();
        link.remove();
        this.dloading = false;
        if (type == "image") {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "story",
            from: "story",
          });
        } else if (type == "video") {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "video",
            from: "story",
          });
        } else {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "mp3",
            from: "story",
          });
        }
      } catch (error) {
        this.dloading = false;
        console.error("捕获到错误: " + error);
      }
    },
    encryptUrl(url, key, iv) {
      // DES 加密
      let encrypted = CryptoJS.DES.encrypt(
        `m=url&url=${encodeURIComponent(url)}`,
        CryptoJS.enc.Utf8.parse(key),
        {
          iv: CryptoJS.enc.Utf8.parse(iv),
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        }
      );
      // 转 Base64
      let base64String = encrypted.toString();
      // URL 编码
      let result = encodeURIComponent(base64String);
      // 最终结果
      return `https://savingtik.com/tt.php?v=${result}`;
    },
    decryptUrl(encryptedUrl, key, iv) {
      // URL 解码
      const decodedUrl = decodeURIComponent(encryptedUrl);

      // Base64 解码
      const parsedWordArray = CryptoJS.enc.Base64.parse(decodedUrl);

      // DES解密
      const decrypted = CryptoJS.DES.decrypt(
        {
          ciphertext: parsedWordArray,
        },
        CryptoJS.enc.Utf8.parse(key),
        {
          iv: CryptoJS.enc.Utf8.parse(iv),
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        }
      );
      return decrypted.toString(CryptoJS.enc.Utf8);
    },
    async Download() {
      // 早些返回以避免嵌套
      if (this.isHttpLoading || this.input === "") return;
      this.downData = {};
      this.httpError = false;
      this.downStorySuccess = false;
      this.downSuccess = false;
      const tiktokUrlPattern = new RegExp("^http(s|)://.*tiktok.com.*/.*$");
      if (!tiktokUrlPattern.test(this.input)) {
        //点击解析下载按钮 action_tt_detect_bottom
        handleClick("action_tt_detect_bottom", {
          site: "other",
          noislink: this.input,
          from: "story",
        });
        this.httpError = true;
        this.isHttpLoading = false;
        return;
      }
      //点击解析下载按钮 action_tt_detect_bottom
      handleClick("action_tt_detect_bottom", {
        site: "tt",
        from: "story",
      });
      //开始解析  tt_start_resolve
      handleClick("tt_start_resolve", {
        islink: this.input,
        from: "story",
      });
      this.isHttpLoading = true;

      try {
        let result = this.encryptUrl(this.input, process.env.DES_KEY, process.env.DES_IV);
        const response = await fetch(result, {
          method: "GET",
          headers: { "Content-Type": "application/json" },
        });
        let encryptedResponse = await response.text();
        let decryptedResponse = this.decryptUrl(
          encryptedResponse,
          process.env.DES_KEY,
          process.env.DES_IV
        ); // 使用你的解密函数
        let data = JSON.parse(decryptedResponse).data;
        // 检查数据是否存在
        if (!data) {
          this.httpError = true;
          this.isHttpLoading = false;
          return;
        }

        if (!data.images) {
          await this.fetchVideoAttributes(data);
          //解析成功  tt_resolve_success
          handleClick("tt_resolve_success", {
            site: "video",
            from: "story",
          });
        } else {
          this.downData = data;
          this.downStorySuccess = true;
          this.isHttpLoading = false;
          //解析成功  tt_resolve_success
          handleClick("tt_resolve_success", {
            site: "story",
            from: "story",
          });
        }
      } catch (error) {
        //解析失败  tt_resolve_fail
        handleClick("tt_resolve_fail", {
          reason: "Failed to fetch",
          islink: this.input,
          from: "story",
        });
        console.error(error);
        this.httpError = true;
        this.isHttpLoading = false;
      }
    },

    async fetchVideoAttributes(data) {
      try {
        const videoBlob = await fetch(data.video_url).then((res) => res.blob());
        this.WithoutVideoSize = `${(videoBlob.size / (1024 * 1024)).toFixed(
          2
        )} MB`;
        // const videoBlob1 = await fetch(this.input).then((res) => res.blob());
        // this.VideoSize  = `${(videoBlob1.size / (1024 * 1024)).toFixed(
        //   2
        // )} MB`;
        const video = document.getElementById("video");
        video.setAttribute("src", data.video_url);
        video.crossOrigin = "anonymous";
        video.innerHTML = `<source src=${data.video_url} type="audio/mp4" >`;

        await new Promise((resolve) =>
          video.addEventListener("canplaythrough", () => {
            this.duration = this.formatSeconds(video.duration);
            resolve();
          })
        );

        await new Promise((resolve) => {
          const image = new Image();
          image.onload = resolve;
          image.src = data.cover;
        });

        this.downData = data;
        this.isHttpLoading = false;
        this.downSuccess = true;
      } catch (error) {
        console.error(error);
        this.httpError = true;
        this.isHttpLoading = false;
      }
    },

    formatSeconds(seconds) {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds - hours * 3600) / 60);
      const secs = Math.floor(seconds % 60);

      // 使用模板字符串清理时间格式化
      const time = [
        hours ? (hours > 9 ? hours : `0${hours}`) : undefined,
        minutes > 9 ? minutes : `0${minutes}`,
        secs > 9 ? secs : `0${secs}`,
      ]
        .filter(Boolean)
        .join(":");

      return time;
    },
    changeFaqItemOpen(item, k) {
      item.isOpen = !item.isOpen;
    },
  },
};
</script>
    <style lang="scss" scoped>
.Reverse {
  direction: rtl;
}
.isBlock {
  display: none;
}
button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
@media (min-width: 992px) {
    .container-tt {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }
    .storyImageList {
        margin-top: 100px;
        flex-wrap: wrap;

        .item {
            position: relative;
            overflow: hidden;
            width: 30%;
            height: 400px;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            margin-bottom: 39px;
            .img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .overlay {
                position: absolute;
                width: 100%;
                height: 100px;
                left: 0;
                bottom: 0;
                background: linear-gradient(to bottom,
                        rgba(0, 0, 0, 0.01),
                        rgba(0, 0, 0, 0.5));

                .posi {
                    position: absolute;
                    left: 50%;
                    bottom: 16px;
                    transform: translateX(-50%);
                    font-size: 18px;
                    font-family: Poppins-Bold, Poppins;
                    font-weight: bold;
                    color: #ffffff;
                    width: 240px;
                    height: 46px;
                    background: #f9224c;
                    border-radius: 12px;

                    .xiazai {
                        width: 24px;
                        height: 24px;
                        margin-right: 6px;
                    }
                }
            }
        }
        
    }
    
}

@media (min-width: 1200px) {
    .container-tt {
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto;
    }
    .storyImageList {
        margin-top: 100px;
        flex-wrap: wrap;

        .item {
            position: relative;
            overflow: hidden;
            width: 22.5%;
            height: 400px;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            margin-bottom: 39px;

            .img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .overlay {
                position: absolute;
                width: 100%;
                height: 100px;
                left: 0;
                bottom: 0;
                background: linear-gradient(to bottom,
                        rgba(0, 0, 0, 0.01),
                        rgba(0, 0, 0, 0.5));

                .posi {
                    position: absolute;
                    left: 50%;
                    bottom: 16px;
                    transform: translateX(-50%);
                    font-size: 18px;
                    font-family: Poppins-Bold, Poppins;
                    font-weight: bold;
                    color: #ffffff;
                    width: 240px;
                    height: 46px;
                    background: #f9224c;
                    border-radius: 12px;

                    .xiazai {
                        width: 24px;
                        height: 24px;
                        margin-right: 6px;
                    }
                }
            }
        }
    }
     
}
@media (min-width: 1024px) {
  .dloading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    .loader {
      width: 88px;
      height: 88px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .loader:before {
      content: "";
      width: 148px;
      height: 10px;
      background: #202a68;
      position: absolute;
      top: 116px;
      left: -27px;
      border-radius: 50%;
      animation: shadow324 0.5s linear infinite;
    }

    .loader:after {
      content: "";
      width: 100%;
      height: 100%;
      background: #202a68;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 4px;
      animation: jump7456 0.5s linear infinite;
    }

    @keyframes jump7456 {
      15% {
        border-bottom-right-radius: 3px;
      }

      25% {
        transform: translateY(9px) rotate(22.5deg);
      }

      50% {
        transform: translateY(18px) scale(1, 0.9) rotate(45deg);
        border-bottom-right-radius: 40px;
      }

      75% {
        transform: translateY(9px) rotate(67.5deg);
      }

      100% {
        transform: translateY(0) rotate(90deg);
      }
    }

    @keyframes shadow324 {
      0%,
      100% {
        transform: scale(1, 1);
      }

      50% {
        transform: scale(1.2, 1);
      }
    }
  }
  .shadowLeftTop-1 {
    position: fixed;
    width: 1095px;
    height: 678px;
    background: #ff0ead;
    mix-blend-mode: normal;
    left: -200px;
    top: -135px;
    -webkit-filter: blur(487px);
    opacity: 0.35;
    filter: blur(478px);
    transform: rotate(16deg);
  }
  .shadowLeftTop-2 {
    position: fixed;
    width: 857px;
    height: 541px;
    background: #092877;
    mix-blend-mode: normal;
    left: -346px;
    top: -346px;
    -webkit-filter: blur(240px);
    opacity: 0.25;
    filter: blur(240px);
    transform: rotate(45deg);
  }
  .shadowRightBottom {
    position: fixed;
    width: 1021px;
    height: 533px;
    background: #00fff7;
    mix-blend-mode: normal;
    right: -803px;
    bottom: 15px;
    -webkit-filter: blur(378px);
    opacity: 0.25;
    filter: blur(378px);
    transform: rotate(20deg);
  }
  .page_content {
    min-height: 100vh;
    z-index: 100;

    header {
      position: relative;
      padding: 14px 0;
      z-index: 999;
      .headLogo {
        width: 34px;
        height: 34px;
        .projectName {
          font-size: 21px;
          font-family: Inter-Extra Bold Italic, Inter;
          font-weight: 800;
          font-style: italic;
          color: #ffffff;
          margin-left: 14px;
        }
      }
      .drawer {
        display: none;
      }
      .headTabs {
        .tItem {
          position: relative;
          text-align: right;
          height: 58px;
          font-size: 14px;
          font-family: Poppins-Light, Poppins;
          color: rgba(255, 255, 255, 0.5);
          line-height: 58px;
          margin-left: 70px;

          .expand {
            position: absolute;
            top: 0;
            right: -20px;
            width: 10px;
            height: 8px;
            margin-left: 4px;
          }
          .Language_box {
            position: absolute;
            left: 100px;
            bottom: -200px;
            z-index: 9999;
            width: 162px;
            height: 177px;
            background: rgba(43, 67, 89, 0.15);
            border-radius: 12px;
            overflow-y: scroll;
            padding: 0 14px;
            .item {
              padding: 14px 0;
              border-bottom: 1px solid rgba(125, 125, 125, 0.1);
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
              text-align: center;
              line-height: 1;
              .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: rgba(0, 255, 247, 1);
                margin-right: 10px;
              }
            }
            .changeItemColor {
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: #ffffff;
            }
            .item:last-child {
              border: 0;
            }
          }
        }
        .bor {
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }
        .tItemFFF {
          color: #fff;
        }
        .tItemBlod {
          color: #fff;
          font-weight: 700;
          // font-family: Poppins-Bold, Poppins;
        }
      }
    }
    .banner {
      // position: relative;
      margin-top: 80px;
      margin-bottom: 60px;
      z-index: 100;
      color: #fff;
      .h1 {
        font-size: 62px;
        font-family: Poppins-Bold Italic, Poppins;
      }
      .h2 {
        font-size: 26px;
        font-family: Poppins-Regular, Poppins;
      }
    }
    .downloadInput {
      .inputBox {
        position: relative;
        overflow: hidden;
        width: 895px;
        background: #ffffff;
        border-radius: 19px;
        z-index: 100;
        padding: 5px;
        padding-left: 20px;
        height: 100%;
        .ipt {
          font-size: 20px;
          padding-right: 10px;
          width: 600px;
          height: 58px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .clearx {
          display: none;
        }
        .downBtn {
          width: 214px;
          height: 62px;
          background: #f9224c;
          border-radius: 19px;
          font-size: 24px;
          font-weight: 700;
          color: #fff;
          .downImg {
            display: none;
          }
        }
        .isHttpLoading {
          background-color: #a6b0bd;
          cursor: not-allowed;
        }
        .posi {
          position: absolute;
          right: 234px;
          top: 21px;
          width: 30px;
          height: 30px;
        }
      }
    }
    .downStorySuccess_app {
      display: none;
    }
    .downSuccess_app {
      display: none;
    }
    .downStorySuccess {
      position: relative;
      margin-top: 60px;
      z-index: 999;
      .storyVideoInfo {
        padding: 14px 20px;
        border-radius: 20px;
        opacity: 1;
        border: 1px solid #111336;
        background-color: rgba(17, 44, 60, 0.2);

        .downLeft {
          flex: 1;
          .img {
            width: 90px;
            height: 90px;
            margin-right: 14px;
            border-radius: 12px;
          }
          .info {
            height: 90px;
            flex: 1;
            margin-right: 30px;
          }
          .text1 {
            // width: 700px;

            font-size: 18px;
            font-family: Poppins-Bold, Poppins;
            font-weight: bold;
            color: #ffffff;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .text2 {
            font-size: 16px;
            font-family: Poppins-Regular, Poppins;
            color: rgba(255, 255, 255, 0.5);
          }
        }
        .downBtn {
          width: 216px;
          height: 56px;
          background: #00fff7;
          border-radius: 12px;
          font-size: 24px;
          font-family: Poppins-Bold Italic, Poppins;
          font-weight: normal;
          color: #1d212c;
        }
      }
      
    }
    .downSuccess {
      position: relative;
      z-index: 999;

      margin-top: 70px;
      .success_box {
        width: 895px;
        ._video {
          .bigImg {
            margin-right: 50px;
            width: 280px;
            height: 400px;
            border-radius: 24px;
            background: #000;
            box-shadow: 6px 6px 0px 0px rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.5);
            .img {
              width: 100%;
              height: 320px;
              object-fit: cover;
            }
          }
          .downInfo {
            height: 400px;
            flex: 1;
            .info_1 {
              .tit {
                font-size: 28px;
                font-family: Poppins-Italic, Poppins;
                font-weight: normal;
                color: #ffffff;
                vertical-align: middle;
                align-items: center;
                .timg {
                  width: 15px;
                  height: auto;
                  margin-right: 10px;
                  .img {
                    vertical-align: middle;
                  }
                }
              }
              .times {
                font-size: 16px;
                font-family: Poppins-Regular, Poppins;
                color: rgba(255, 255, 255, 0.5);
                .img {
                  width: 18px;
                  height: 18px;
                  margin-right: 8px;
                }
              }
            }
            .info_2 {
              font-size: 16px;
              font-family: Poppins-Italic, Poppins;
              font-weight: normal;
              color: rgba(255, 255, 255, 0.5);
              display: -webkit-box;
              -webkit-line-clamp: 6;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              flex: 1;
              margin-top: 20px;
            }
            .info_3 {
              .item {
                margin-top: 18px;
                padding: 14px 20px;
                border-radius: 20px;
                opacity: 1;
                border: 1px solid #111336;
                background-color: rgba(17, 44, 60, 0.2);
                .downLeft {
                  .text1 {
                    font-size: 16px;
                    font-family: Poppins-Bold, Poppins;
                    font-weight: bold;
                    color: #ffffff;
                  }
                  .text2 {
                    margin-top: 4px;
                    font-size: 14px;
                    font-family: Poppins-Regular, Poppins;
                    color: rgba(255, 255, 255, 0.5);
                  }
                }
                .downBtn {
                  width: 173px;
                  height: 52px;
                  background: #3ec6ff;
                  border-radius: 12px;
                  font-size: 24px;
                  font-family: Poppins-Bold Italic, Poppins;
                  font-weight: normal;
                  color: #1d212c;
                }
              }
            }
          }
        }
      }
    }
    .loading-dots {
      position: relative;
      z-index: 999;
      margin-top: 70px;
    }

    .dot {
      background-color: #83818c;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: 0 10px;
      animation: loading-animation 1.5s infinite;
    }

    .dot:nth-child(2) {
      animation-delay: 0.5s;
    }

    .dot:nth-child(3) {
      animation-delay: 1s;
    }

    @keyframes loading-animation {
      0%,
      80%,
      100% {
        transform: scale(1);
      }
      40% {
        transform: scale(1.5);
      }
    }
    .tips {
      margin-top: 40px;
      font-size: 18px;
      font-family: Poppins-Regular, Poppins;
      color: #00fff7;
      .tip {
        width: 22px;
        height: 22px;
        margin-right: 10px;
      }
    }
    .error {
      position: relative;
      z-index: 999;
      margin-top: 70px;
      .hono {
        font-size: 18px;
        font-family: Poppins-Bold, Poppins;
        font-weight: bold;
        color: #f9224c;
        margin-bottom: 20px;
        .img {
          width: 22px;
          height: 22px;
          margin-right: 10px;
        }
      }
      .errMsg {
        font-size: 18px;
        font-family: Poppins-Regular, Poppins;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .declare {
      // position: relative;
      z-index: 999;
      margin-top: 100px;
      width: 100%;
      background: rgba(17, 44, 60, 0.2);
      border-radius: 32px;
      z-index: 100;
      padding: 40px;
      .h3 {
        font-size: 36px;
      }
      .tit {
        color: #fff;
        font-family: Poppins-Bold Italic, Poppins;
        vertical-align: middle;
        align-items: flex-start;
        .timg {
          width: 15px;
          height: auto;
          margin-right: 10px;
          margin-top: 20px;
          .img {
            vertical-align: middle;
          }
        }
      }
      .text_content {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.5);

        font-weight: 500;
        font-family: Poppins-Light, Poppins;
      }
    }
    .font18 {
      font-size: 18px !important;
    }
    .next_content {
      // position: relative;
      z-index: 999;
      margin-top: 100px;
      .h3 {
        font-size: 36px;
      }
      .timeline_title {
        color: #fff;
        font-size: 36px;
        font-family: Poppins-Bold Italic, Poppins;
        vertical-align: middle;
        align-items: flex-start;
        .timg {
          width: 15px;
          height: auto;
          margin-right: 10px;
          margin-top: 4px;
          .img {
            vertical-align: middle;
          }
        }
      }
      .timeline_content_app {
        display: none;
      }
      .timeline_content {
        margin-top: 40px;
        .sectionImg {
          margin: 20px 0;
          width: 480px;
          height: auto;
        }
        .section {
          margin-top: 34px;
          .section-upper {
            font-family: Poppins-Bold Italic, Poppins;
            .section-left {
              position: relative;
              width: 40px;
              height: 40px;
              background: rgba(249, 34, 76, 0.2);
              border-radius: 50%;

              .current {
                position: absolute;
                top: -34px;
                left: 55%;
                transform: translateX(-50%);
                font-size: 54px;
                font-weight: normal;
                color: #f9224c;
              }
            }
            .section-right {
              margin-right: 22px;
              font-size: 28px;
              color: #3ec6ff;
            }
          }
          .section-lower {
            margin: 16px 0;
            .Group {
              width: 39px;
            }
            .section-left {
              width: 20px;
              height: 20px;
              background: url("~static/Group.webp");
              background-size: 20px auto;
              background-repeat: no-repeat;
            }
            .section-right {
              margin-left: 22px;
              flex: 1;
              border-radius: 14px;
              background-color: rgba(17, 44, 60, 0.2);
              padding: 16px 24px;
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              color: #ffffff;
            }
          }
        }
        .section:nth-child(3) {
          .section-right {
          }
        }
      }
    }
    .table {
      overflow: hidden;
      margin-top: 100px;
      width: 100%;
      border-radius: 24px;
      .table-title {
        height: 84px;
        background: #3ec6ff;
        font-size: 28px;
        font-family: Poppins-Bold Italic, Poppins;
        font-weight: normal;
        color: #1d212c;
      }
      .table-content {
        // position: relative;
        flex: 1;
        width: 100%;
        background-color: rgba(30, 64, 84, 0.2);
        .table-left {
          width: 50%;
          .item {
            padding: 16px 0;
            font-size: 18px;
            font-family: Poppins-Bold Italic, Poppins;
            font-weight: normal;
            color: #ffffff;
            border-bottom: 1px solid rgba(217, 217, 217, 0.1);
            .bgImg {
              margin-left: 6px;
              width: 20px;
              height: 20px;
              background: url("~static/success.webp");
              background-size: 20px auto;
              background-repeat: no-repeat;
            }
          }
          .item:last-child {
            border-bottom: 0;
          }
        }
        .table-right {
          width: 50%;
          border-right: 1px solid rgba(217, 217, 217, 0.1);

          .item {
            padding: 16px 0;
            font-size: 18px;
            font-family: Poppins-Bold Italic, Poppins;
            font-weight: normal;
            color: #ffffff;
            border-bottom: 1px solid rgba(217, 217, 217, 0.1);

            .bgImg {
              margin-left: 6px;
              width: 20px;
              height: 20px;
              background: url("~static/Lightning.webp");
              background-size: 20px auto;
              background-repeat: no-repeat;
            }
          }
          .item:last-child {
            border-bottom: 0;
          }
        }
      }
    }
    .benefits {
      position: relative;
      z-index: 999;
      margin: 100px 0;
      .benePosi {
        position: absolute;
        right: -57px;
        bottom: -154px;
        width: 460px;
        height: 460px;
      }
      .beneTit {
        font-size: 28px;
        font-family: Poppins-Bold Italic, Poppins;
        font-weight: normal;
        color: rgba(255, 255, 255, 0.8);
        .img {
          margin-left: 10px;
          width: 32px;
          height: 32px;
        }
      }
      .beneContent {
        position: relative;
        z-index: 999;
        margin-top: 40px;

        .col1 {
          transform: translateX(-40px);
          margin-bottom: 18px;
          align-items: flex-start;
          font-family: Poppins-Italic, Poppins;

          .dian {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            margin-left: 10px;
            margin-top: 12px;
          }
          .text {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
    .faqs {
      // position: relative;
      width: 100%;
      .faq_title {
        font-size: 36px;
        font-family: Poppins-Bold Italic, Poppins;
        color: #ffffff;
      }
      .faq_content {
        margin-top: 100px;
        .faq_item {
          padding: 20px 0;
          border-bottom: 1px solid rgba(217, 217, 217, 0.1);
          .itemTitle {
            .tit {
              font-size: 18px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: #ffffff;
              text-align: left;
            }
            .imgs {
              width: 22px;
              height: 22px;
            }
            .opentriangle {
              width: 22px;
              height: 22px;
              // position: relative;
              background-image: url("~static/xiajiao.png"); /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
              background-size: 22px 22px;
              background-repeat: no-repeat;
              z-index: 9999;
            }
            .closetriangle {
              width: 22px;
              height: 22px;
              // position: relative;
              background-image: url("~static/shangjiao.png"); /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
              background-size: 22px 22px;
              background-repeat: no-repeat;
              z-index: 9999;
            }
          }
          .faq_text {
            margin-top: 20px;
            font-size: 16px;
            font-family: Poppins-Italic, Poppins;
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
    .footer {
      // position: relative;

      margin-top: 300px;
      .bottom_nav {
        align-items: flex-start;
        .logo {
          transform: translate(-10px, -27px);
          width: 132px;
          height: 171px;
        }
        .nav_list {
          align-items: flex-start;
          .item {
            margin-left: 140px;
            .item_title {
              margin-bottom: 20px;
              font-size: 18px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: #ffffff;
            }
            .item_text {
              margin-bottom: 20px;
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
  }
  .page_bottom {
    margin-top: 30px;
    padding: 40px 0;
    border-top: 2px solid rgba(217, 217, 217, 0.1);
    font-size: 14px;
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.5);
  }
  .app_page_bottom {
    display: none;
  }
}
@media (max-width: 1023px) {
  /* 当设备屏幕宽度小于等于1023像素时，应用其中定义的样式。 */
  .dloading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    .loader {
      width: 88px;
      height: 88px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .loader:before {
      content: "";
      width: 148px;
      height: 10px;
      background: #202a68;
      position: absolute;
      top: 116px;
      left: -27px;
      border-radius: 50%;
      animation: shadow324 0.5s linear infinite;
    }

    .loader:after {
      content: "";
      width: 100%;
      height: 100%;
      background: #202a68;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 4px;
      animation: jump7456 0.5s linear infinite;
    }

    @keyframes jump7456 {
      15% {
        border-bottom-right-radius: 3px;
      }

      25% {
        transform: translateY(9px) rotate(22.5deg);
      }

      50% {
        transform: translateY(18px) scale(1, 0.9) rotate(45deg);
        border-bottom-right-radius: 40px;
      }

      75% {
        transform: translateY(9px) rotate(67.5deg);
      }

      100% {
        transform: translateY(0) rotate(90deg);
      }
    }

    @keyframes shadow324 {
      0%,
      100% {
        transform: scale(1, 1);
      }

      50% {
        transform: scale(1.2, 1);
      }
    }
  }
  .shadowLeftTop-1 {
    position: fixed;
    width: 300px;
    height: 300px;
    background: #ff0ead;
    mix-blend-mode: normal;
    left: -100px;
    top: -150px;
    -webkit-filter: blur(110px);
    opacity: 0.3;
    filter: blur(110px);
    transform: rotate(16deg);
  }
  .shadowLeftTop-2 {
    position: fixed;
    width: 200px;
    height: 200px;
    background: #092877;
    mix-blend-mode: normal;
    left: 50px;
    top: -50px;
    -webkit-filter: blur(80px);
    opacity: 0.25;
    filter: blur(80px);
    transform: rotate(45deg);
  }
  .shadowRightBottom {
    position: fixed;
    width: 300px;
    height: 200px;
    background: #26aaa6;
    opacity: 0.6;
    mix-blend-mode: normal;
    right: -125px;
    bottom: -12px;
    -webkit-filter: blur(100px);
    opacity: 0.25;
    filter: blur(100px);
    transform: rotate(20deg);
  }
  .page_content {
    padding: 0 24px;
    min-height: 100vh;
    z-index: 100;
    width: 100%;
    header {
      // position: relative;
      padding: 14px;
      z-index: 999;
      .headLogo {
        transform: translateX(-14px);
        width: 19px;
        height: 19px;
        .projectName {
          font-size: 12px;
          font-family: Inter-Extra Bold Italic, Inter;
          font-weight: 800;
          font-style: italic;
          color: #ffffff;
          margin-left: 12px;
        }
      }
      .drawer {
        display: block;
        width: 26px;
        height: 26px;
        transform: translateX(14px);
      }
      .headTabs {
        display: none;
        .tItem {
          position: relative;
          width: 220px;
          text-align: right;
          height: 38px;
          font-size: 14px;
          font-family: Poppins-Light, Poppins;
          color: rgba(255, 255, 255, 0.5);
          line-height: 38px;
          .bor {
            position: absolute;
            bottom: -18px;
            left: 82px;
            width: 142px;
            height: 1px;
            background: rgba(255, 255, 255, 0.5);
          }
          .expand {
            position: absolute;
            top: 0;
            right: -20px;
            width: 10px;
            height: 8px;
            margin-left: 4px;
          }
          .Language_box {
            position: absolute;
            left: 100px;
            bottom: -200px;
            z-index: 9999;
            width: 162px;
            height: 177px;
            background: rgba(43, 67, 89, 0.15);
            border-radius: 12px;
            overflow-y: scroll;
            padding: 0 14px;
            .item {
              padding: 14px 0;
              border-bottom: 1px solid rgba(125, 125, 125, 0.1);
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
              text-align: center;
              line-height: 1;
              .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: rgba(0, 255, 247, 1);
                margin-right: 10px;
              }
            }
            .changeItemColor {
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: #ffffff;
            }
            .item:last-child {
              border: 0;
            }
          }
        }
        .tItemFFF {
          color: #fff;
        }
        .tItemBlod {
          color: #fff;
          font-weight: 700;
          // font-family: Poppins-Bold, Poppins;
        }
      }
    }
    .banner {
      // position: relative;
      margin-top: 30px;
      width: 100%;
      height: auto;
      margin-bottom: 40px;
      z-index: 100;
      color: #fff;
      .h1 {
        font-size: 22px;
        font-family: Poppins-Bold Italic, Poppins;
      }
      .h2 {
        font-size: 12px;
        font-family: Poppins-Regular, Poppins;
      }
    }
    .downloadInput {
      box-sizing: border-box;
      overflow: hidden;
      width: 100%;
      border: 1px solid #f9224c;
      background-color: #f9224c;
      border-radius: 8px;
      height: 42px;
      .inputBox {
        position: relative;
        overflow: hidden;
        background: #ffffff;
        z-index: 100;
        height: 100%;
        width: 100%;
        .ipt {
          font-size: 12px;
          padding-left: 20px;
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .iptbtn {
          display: none;
        }
        .clearx {
          width: 30px;
          height: 30px;
          margin-left: 20px;
          margin-right: 8px;
          .img {
            width: 20px;
            height: 20px;
          }
        }
        .downBtn {
          width: 64px;
          height: 100%;
          background: #f9224c;
          .downImg {
            width: 26px;
            height: 26px;
          }
        }
        .isHttpLoading {
          background-color: #a6b0bd;
          cursor: not-allowed;
        }
        .posi {
          display: none;
          position: absolute;
          right: 234px;
          top: 30px;
          width: 30px;
          height: 30px;
        }
      }
    }

    .downStorySuccess {
      display: none;

      position: relative;
      margin-top: 60px;
      z-index: 999;
      .storyVideoInfo {
        padding: 14px 20px;
        border-radius: 20px;
        opacity: 1;
        border: 1px solid #111336;
        background-color: rgba(17, 44, 60, 0.2);

        .downLeft {
          flex: 1;
          .img {
            width: 90px;
            height: 90px;
            margin-right: 14px;
            border-radius: 12px;
          }
          .info {
            height: 90px;
            flex: 1;
          }
          .text1 {
            // width: 700px;

            font-size: 18px;
            font-family: Poppins-Bold, Poppins;
            font-weight: bold;
            color: #ffffff;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .text2 {
            font-size: 16px;
            font-family: Poppins-Regular, Poppins;
            color: rgba(255, 255, 255, 0.5);
          }
        }
        .downBtn {
          width: 216px;
          height: 56px;
          background: #00fff7;
          border-radius: 12px;
          font-size: 24px;
          font-family: Poppins-Bold Italic, Poppins;
          font-weight: normal;
          color: #1d212c;
        }
      }
       
    }
    .downStorySuccess_app {
      position: relative;
      margin-top: 40px;
      z-index: 999;
      .storyVideoInfo {
        padding: 10px;
        border-radius: 12px;
        border: 1px solid #111336;
        background-color: rgba(17, 44, 60, 0.2);

        .downLeft {
          flex: 1;
          .img {
            width: 54px;
            height: 54px;
            margin-right: 14px;
            border-radius: 12px;
          }
          .info {
            height: 54px;
            flex: 1;
          }
          .text1 {
            font-size: 12px;
            font-family: Poppins-Bold, Poppins;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.5);
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .text2 {
            font-size: 12px;
            font-family: Poppins-Regular, Poppins;
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }
      .allDown {
        margin: 20px 0;
        width: 100%;
        height: 46px;
        background: #00fff7;
        border-radius: 12px;
        font-size: 16px;
        font-family: Poppins-Bold Italic, Poppins;
        font-weight: normal;
        color: #1d212c;
      }
      .storyImageList {
        margin-top: 30px;
        flex-wrap: wrap;
        .item {
          position: relative;
          width: 48%;
          height: 210px;
          margin-bottom: 46px;
          box-sizing: border-box;

          .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.5);
          }

          .overlay {
            position: absolute;
            width: 100%;
            height: 60px;
            left: 0;
            bottom: 0;
            background: linear-gradient(
              to bottom,
              rgba(0, 0, 0, 0.01),
              rgba(0, 0, 0, 0.5)
            );
            .posi {
              position: absolute;
              left: 50%;
              bottom: 0;
              transform: translate(-50%, 50%);
              z-index: 9999;
              .xiazai {
                width: 46px;
                height: 46px;
              }
            }
          }
        }
        .item:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
    .downSuccess {
      display: none;
      position: relative;
      z-index: 999;

      margin-top: 70px;
      .success_box {
        width: 895px;
        ._video {
          .bigImg {
            margin-right: 50px;
            width: 280px;
            height: 420px;
            border-radius: 24px;
            background: #000;
            box-shadow: 6px 6px 0px 0px rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.5);
            .img {
              width: 100%;
              height: 320px;
              object-fit: cover;
            }
          }
          .downInfo {
            height: 420px;
            flex: 1;
            .info_1 {
              .tit {
                font-size: 28px;
                font-family: Poppins-Italic, Poppins;
                font-weight: normal;
                color: #ffffff;
                vertical-align: middle;
                align-items: center;
                .timg {
                  width: 15px;
                  height: auto;
                  margin-right: 10px;
                  margin-bottom: 30px;
                  .img {
                    vertical-align: middle;
                  }
                }
              }
              .times {
                font-size: 16px;
                font-family: Poppins-Regular, Poppins;
                color: rgba(255, 255, 255, 0.5);
                .img {
                  width: 18px;
                  height: 18px;
                  margin-right: 8px;
                }
              }
            }
            .info_2 {
              font-size: 16px;
              font-family: Poppins-Italic, Poppins;
              font-weight: normal;
              color: rgba(255, 255, 255, 0.5);
              display: -webkit-box;
              -webkit-line-clamp: 6;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              flex: 1;
              margin-top: 20px;
            }
            .info_3 {
              .item {
                margin-top: 18px;
                padding: 14px 20px;
                border-radius: 20px;
                opacity: 1;
                border: 1px solid #111336;
                background-color: rgba(17, 44, 60, 0.2);

                .downLeft {
                  .text1 {
                    font-size: 18px;
                    font-family: Poppins-Bold, Poppins;
                    font-weight: bold;
                    color: #ffffff;
                  }
                  .text2 {
                    margin-top: 4px;
                    font-size: 16px;
                    font-family: Poppins-Regular, Poppins;
                    color: rgba(255, 255, 255, 0.5);
                  }
                }
                .downBtn {
                  width: 173px;
                  height: 56px;
                  background: #00fff7;
                  border-radius: 12px;
                  font-size: 24px;
                  font-family: Poppins-Bold Italic, Poppins;
                  font-weight: normal;
                  color: #1d212c;
                }
              }
            }
          }
        }
      }
    }
    .downSuccess_app {
      position: relative;
      z-index: 999;
      margin-top: 40px;
      .success_box {
        ._video {
          .bigImg {
            margin-right: 30px;
            width: 140px;
            height: 210px;
            border-radius: 24px;
            background: #000;
            border: 1px solid rgba(255, 255, 255, 0.5);
            vertical-align: middle;

            .img {
              width: 100%;
              height: 160px;
              object-fit: cover;
            }
          }
          .downInfo {
            height: 210px;
            flex: 1;
            padding-top: 20px;
            .info_1 {
              .tit {
                font-size: 16px;
                font-family: Poppins-Italic, Poppins;
                font-weight: normal;
                color: #ffffff;
                align-items: center;
                .timg {
                  width: 12px;
                  height: auto;
                  margin-right: 10px;
                }
              }
              .uname {
                width: 150px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .times {
              font-size: 12px;
              font-family: Poppins-Bold Italic, Poppins;
              font-weight: normal;
              color: rgba(255, 255, 255, 0.5);
            }
            .info_2 {
              margin-top: 8px;
              font-size: 16px;
              font-family: Poppins-Italic, Poppins;
              font-weight: normal;
              color: rgba(255, 255, 255, 0.5);
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 5;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              flex: 1;
            }
          }
        }
        .info_3 {
          margin-top: 30px;
          .item {
            margin-top: 18px;
            padding: 10px;
            border-radius: 12px;
            border: 1px solid #111336;
            background-color: rgba(17, 44, 60, 0.2);
            .downLeft {
              .text1 {
                font-size: 12px;
                font-family: Poppins-Bold, Poppins;
                font-weight: bold;
                color: #ffffff;
              }
              .text2 {
                margin-top: 6px;
                font-size: 12px;
                font-family: Poppins-Regular, Poppins;
                color: rgba(255, 255, 255, 0.5);
              }
            }
            .downBtn {
              width: 102px;
              height: 42px;
              background: #00fff7;
              border-radius: 6px;
              font-size: 14px;
              font-family: Poppins-Bold Italic, Poppins;
              font-weight: normal;
              color: #1d212c;
            }
          }
        }
      }
    }
    .loading-dots {
      position: relative;
      z-index: 999;
      margin-top: 30px;
    }

    .dot {
      background-color: #83818c;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: 0 10px;
      animation: loading-animation 1.5s infinite;
    }

    .dot:nth-child(2) {
      animation-delay: 0.5s;
    }

    .dot:nth-child(3) {
      animation-delay: 1s;
    }

    @keyframes loading-animation {
      0%,
      80%,
      100% {
        transform: scale(1);
      }
      40% {
        transform: scale(1.5);
      }
    }
    .tips {
      margin-top: 20px;
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      color: #00fff7;
      .tip {
        width: 14px;
        height: 14px;
        margin-right: 10px;
      }
    }
    .error {
      margin-top: 30px;
      position: relative;
      .hono {
        font-size: 14px;
        font-family: Poppins-Bold, Poppins;
        font-weight: bold;
        color: #f9224c;
        margin-bottom: 10px;
        .img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }
      .errMsg {
        font-size: 12px;
        font-family: Poppins-Regular, Poppins;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .declare {
      // position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 999;
      margin-top: 20px;
      width: 100%;
      text-align: center;
      z-index: 100;
      .tit {
        color: #fff;
        font-size: 16px;
        font-family: Poppins-ExtraBold, Poppins;
        font-weight: 800;
        vertical-align: middle;
        align-items: center;
        width: 200px;
        .timg {
          display: none;
        }
      }
      .text_content {
        margin-top: 10px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
        text-align: left;
        font-weight: 500;
        font-family: Poppins-Light, Poppins;
      }
    }
    .next_content {
      // position: relative;
      z-index: 999;
      margin-top: 40px;
      .timeline_title {
        padding: 0 30px;
        color: #fff;
        font-size: 16px;
        font-family: Poppins-ExtraBold, Poppins;
        font-weight: 800;
        text-align: center;
        .red {
          color: rgba(249, 34, 76, 1);
        }
        .timg {
          display: none;
        }
      }
      .timeline_content_app {
        display: block;
        // position: relative;
        border-radius: 24px 24px 24px 24px;
        background-color: rgba(17, 44, 60, 0.5);
        border: 1px solid #112c3c;
        padding: 22px 18px;
        z-index: 999;
        margin-top: 40px;
        .section {
          .section-upper {
            font-family: Poppins-Bold Italic, Poppins;
            align-items: flex-start;
            .section-left {
              position: relative;
              width: 12px;
              height: 12px;
            }
            .section-right {
              margin-right: 16px;
              font-size: 16px;
              color: #00fff7;
            }
          }
          .section-lower {
            .section-right {
              margin-top: 6px;
              margin-left: 26px;
              flex: 1;
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.8);
            }
          }
        }
        .sectionImg {
          margin: 20px 0;
          width: 300px;
          height: auto;
        }
        .section:nth-child(3) {
          margin-bottom: 0;
          .section-right {
            margin-bottom: 0;
          }
        }
      }
      .timeline_content {
        display: none;
        margin-top: 80px;
        .section {
          margin-top: 34px;
          .section-upper {
            font-family: Poppins-Bold Italic, Poppins;
            .section-left {
              position: relative;
              width: 61px;
              height: 61px;
              background: rgba(249, 34, 76, 0.2);
              border-radius: 50%;

              .current {
                position: absolute;
                top: -50px;
                left: 60%;
                transform: translateX(-50%);
                font-size: 82px;
                font-weight: normal;
                color: #f9224c;
              }
            }
            .section-right {
              margin-left: 22px;
              font-size: 42px;
              color: #00fff7;
            }
          }
          .section-lower {
            margin: 16px 0;
            .Group {
              width: 61px;
            }
            .section-left {
              width: 28px;
              height: auto;
            }
            .section-right {
              margin-left: 22px;
              flex: 1;
              border-radius: 24px;
              background-color: rgba(17, 44, 60, 0.2);
              padding: 24px 44px;
              font-size: 21px;
              font-family: Poppins-Regular, Poppins;
              color: #ffffff;
            }
          }
        }
        .section:nth-child(3) {
          .section-right {
            margin-top: 26px;
          }
        }
      }
    }
    .table {
      overflow: hidden;
      margin-top: 40px;
      width: 100%;
      border-radius: 14px;
      .table-title {
        height: 54px;
        background: #3ec6ff;
        font-size: 16px;
        font-family: Poppins-Bold Italic, Poppins;
        font-weight: normal;
        color: #1d212c;
      }
      .table-content {
        // position: relative;
        flex: 1;
        width: 100%;
        background-color: rgba(30, 64, 84, 0.2);
        .table-left {
          width: 50%;
          .item {
            padding: 12px 0;
            font-size: 12px;
            font-family: Poppins-Bold Italic, Poppins;
            font-weight: normal;
            color: #ffffff;
            border-bottom: 1px solid rgba(217, 217, 217, 0.1);
            .bgImg {
              width: 16px;
              height: 16px;
              background: url("~static/success.webp");
              background-size: 16px auto;
              background-repeat: no-repeat;
            }
          }
          .item:last-child {
            border-bottom: 0;
          }
        }
        .table-right {
          width: 50%;
          border-right: 1px solid rgba(217, 217, 217, 0.1);

          .item {
            padding: 12px 0;
            font-size: 12px;
            font-family: Poppins-Bold Italic, Poppins;
            font-weight: normal;
            color: #ffffff;
            border-bottom: 1px solid rgba(217, 217, 217, 0.1);

            .bgImg {
              width: 16px;
              height: 16px;
              background: url("~static/Lightning.webp");
              background-size: 16px auto;
              background-repeat: no-repeat;
            }
          }
          .item:last-child {
            border-bottom: 0;
          }
        }
      }
    }
    .benefits {
      position: relative;
      z-index: 999;
      margin: 30px 0;
      padding: 20px 16px;
      padding-bottom: 10px;
      border-radius: 20px;
      background-color: rgba(86, 86, 86, 0.1);
      .benePosi {
        display: none;
        position: absolute;
        right: -57px;
        bottom: -154px;
        width: 460px;
        height: 460px;
      }
      .beneTit {
        font-size: 14px;
        font-family: Poppins-Bold Italic, Poppins;
        font-weight: normal;
        color: #575079;
        .img {
          margin-left: 10px;
          width: 18px;
          height: 18px;
        }
      }
      .beneContent {
        position: relative;
        z-index: 999;
        margin-top: 20px;

        .col1 {
          align-items: flex-start;
          transform: translateX(-6px);
          margin-bottom: 10px;
          font-family: Poppins-Italic, Poppins;

          .dian {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: rgba(87, 80, 121, 0.5);
            margin-left: 10px;
            margin-top: 6px;
          }
          .text {
            flex: 1;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
    .faqs {
      margin-top: 40px;
      width: 100%;
      .faq_title {
        font-size: 16px;
        font-family: Poppins-ExtraBold, Poppins;
        color: #ffffff;
      }
      .faq_content {
        margin-top: 40px;
        .faq_item {
          border-radius: 24px;
          padding: 18px;
          background: rgba(17, 44, 60, 0.5);
          border: 1px solid #112c3c;
          margin-bottom: 20px;
          .itemTitle {
            .tit {
              font-size: 14px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: rgba(255, 255, 255, 0.8);
              flex: 1;
            }
            .imgs {
              width: 20px;
              height: 20px;
              opacity: 0.8;
              margin-left: 20px;
            }
            .opentriangle {
              // position: relative;
              width: 22px;
              height: 22px;
              background-image: url("~static/xiajiao.png"); /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
              background-size: 22px 22px;
              background-repeat: no-repeat;
              z-index: 9999;
            }
            .closetriangle {
              // position: relative;
              width: 22px;
              height: 22px;
              background-image: url("~static/shangjiao.png"); /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
              background-size: 22px 22px;
              background-repeat: no-repeat;
              z-index: 9999;
            }
          }
          .faq_text {
            margin-top: 16px;
            font-size: 12px;
            font-family: Poppins-Italic, Poppins;
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
    .footer {
      display: none;
      margin-top: 300px;
      .bottom_nav {
        align-items: flex-start;
        .logo {
          transform: translate(-60px, -77px);
          width: 182px;
          height: 182px;
        }
        .nav_list {
          align-items: flex-start;
          .item {
            margin-left: 140px;
            .item_title {
              margin-bottom: 20px;
              font-size: 21px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: #ffffff;
            }
            .item_text {
              margin-bottom: 20px;
              font-size: 16px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
  }
  .page_bottom {
    display: none;
    margin-top: 100px;
    padding: 40px 0;
    border-top: 2px solid rgba(217, 217, 217, 0.1);
    font-size: 14px;
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.2);
  }
  .app_page_bottom {
    margin-top: 100px;
    padding: 14px 40px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(217, 217, 217, 0.03);
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.5);
    .hefl {
      color: rgba(255, 255, 255, 0.1);

      font-size: 10px;
      margin-bottom: 12px;
    }
    .link {
      // position: relative;
      font-size: 12px;
      .tr {
        transform: translateX(12px);
      }
    }
  }
}
.popup_box {
  width: 100%;
  height: 100%;
  background: #080f25;

  .close {
    padding: 14px;
    .img {
      width: 26px;
      height: 26px;
    }
  }
  .page_box {
    margin-bottom: 20px;
    .item {
      padding: 16px;
      padding-left: 20px;
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #00fff7;
        margin-right: 8px;
      }
    }
    .item:nth-child(3) {
      background-color: rgba(17, 44, 60, 0.3);
      font-size: 12px;
      font-family: Poppins-Bold, Poppins;
      font-weight: bold;
      color: #00fff7;
    }
    .item:nth-child(1) {
      .dian {
        background: transparent;
      }
    }
    .item:nth-child(2) {
      .dian {
        background: transparent;
      }
    }
  }
  .Language_box {
    padding-top: 30px;
    border-top: 1px solid rgba(217, 217, 217, 0.1);
    .title {
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: #ffffff;
      padding-bottom: 10px;
      padding-left: 20px;
    }
    .item {
      padding: 16px;
      padding-left: 20px;
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #00fff7;
        margin-right: 8px;
      }
    }
    .item:nth-child(2) {
      background-color: rgba(17, 44, 60, 0.3);
      font-size: 12px;
      font-family: Poppins-Bold, Poppins;
      font-weight: bold;
      color: #00fff7;
    }
    .item:nth-child(3) {
      .dian {
        background: transparent;
      }
    }
    .item:nth-child(4) {
      .dian {
        background: transparent;
      }
    }
    .item:nth-child(5) {
      .dian {
        background: transparent;
      }
    }
  }
}
</style>